<%--
   help
   Copyright (c) 2013 ISPERP
   Version : 1.0.0
 --%>
<%@ tag language="java" pageEncoding="UTF-8"
	deferredSyntaxAllowedAsLiteral="false" trimDirectiveWhitespaces="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ attribute name="changeId" required="true" type="java.lang.String"
	description="changeId"%>
<%@ attribute name="viewOnly" required="true" type="java.lang.Boolean"
	description="viewOnly"%>
	
<style>
.ul_div {
	float: left;
	width: 120px;
}

.ul_div ul {
	border-bottom: 1px solid #0099CC;
}

.hspan {
	display: inline-block;;
}

.ul_div ul li {
	border-top: 1px solid #0099CC;
	border-left: 1px solid #0099CC;
	border-right: 1px solid #0099CC;
	text-align: center;
	padding: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#changeCiCon ul {
	
}

.cili1 {
	
}

.ulcihead {
	height: 35px;
	font-size: 14px;
	line-height: 30px;
	margin-left: 30px;
}
</style>
<style>
table.gridtable {
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: #333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
	width: 80%;
}

table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}

table.gridtable td {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
</style>
<c:if test="${viewOnly eq false }">
  <tr>
	<td class="td1">变更配置清单：</td>
	<td class="td2" colspan="3">
		<div class="header">

			<button onclick="return RelateChangeCi()" value="选择变更资产"
				class="button  button  nui-mainbtn" style="width:120px;">添加变更配置项</button>
			<div id="returnExcuteFunDivId" onclick="afterEditCi()"
				style="display:none"></div>
		</div></td>

</tr>
</c:if>

<tr id="tr_chgCiContainer" style="display:none">
	<td class="td2" colspan="4"><input type="hidden" id="changeRelateCi_viewOnly">
		<div id="changeCiCon" style="margin-left:5px;"></div></td>
</tr>

<c:if test="${viewOnly eq false }">
  <script type="text/javascript">
  $("#changeRelateCi_viewOnly").val("0");
     
  </script>
</c:if>
<script type="text/javascript">
   $(function(){
      var tempChangeId='${changeId }';
      if(tempChangeId)
      {
       createChangeCiList(null);
      }
   });

	function afterEditCi() {
		var changeId = '${changeId }';
		rebulidCipropertyList(changeId);
	}

	function rebulidCipropertyList(changeId) {
		//加载资产变更属性列表
		$.getJSON("change/changeConfiguration/listCiChangeProperty?changeId=" + changeId, function(resultData) {
			//加载资产变更属性列表
			var tciid = "";
			var ci_length = 0;
			var ciidarr = new Array();
			for ( var j = 0; j < resultData.length; j++) {
				var ciid = resultData[j].ciId;
				if (tciid != ciid) {
					ci_length += 1;
					ciidarr.push(ciid);
				}
				tciid = ciid;
			}
			for ( var i = 0; i < ci_length; i++) {
				//var trStr = "<tr id='tr_ci_"+ciidarr[i]+"'><td><div style='width:100%;overflow:auto;margin-left:40px;'>";
				//trStr += "<div class='ul_div'><ul><li>&nbsp;</li>" + "<li>当前值：</li>" + "<li style='font-weight:bold'>计划变更值：</li></ul></div>";
				var trStr="<table class='gridtable' style='width:60%;margin-left:25px;' id='table_ci_"+ciidarr[i]+"'><tr><th style=\"width:30%\">属性名</th><th style=\"width:20%\">当前值</th><th style=\"width:20%\">计划变更值</th><th>属性类型</th></tr>"
				for ( var k = 0; k < resultData.length; k++) {
					var ciid = resultData[k].ciId;
					var columnname = resultData[k].columnname;
					var columnvalue = resultData[k].columnvalue;
					var columnvalue_before = resultData[k].columnvalueBefore;
					var protype=resultData[k].isCategoryProprety==1?'配置属性':'资产属性';
					if(columnvalue_before==undefined)
					    columnvalue_before="";
					if (ciid == ciidarr[i]) {
                        trStr +="<tr><td>"+columnname+"</td><td>"+columnvalue_before+"</td><td>"+columnvalue+"</td><td>"+protype+"</td></tr>";
						//trStr += "<div class='ul_div'><ul><li style='font-weight:bold'>" + columnname + "</li>" + "<li title='"+columnvalue_before+"'>" + columnvalue_before + "</li>" + "<li title='"+columnvalue+"'>" + columnvalue + "</li></ul></div>";
					}
				}
				var tableStr=trStr+"</table>";
				$("#table_ci_" + ciidarr[i]).remove();
				$("#div_ci_" + ciidarr[i]).append($(tableStr));

			}

		});

	}

	function editChangeCi(ciId) {
		var chgId = '${changeId }';
		var tecServiceId=$("#serviceCategoryId").val();
		isperp.openDialog({
			title : "编辑",
			contentUrl : "change/change/chgConfigurationEdit?changeId=" + chgId + "&tecServiceId="+tecServiceId+"&id=" + ciId,
			onThisWindow : true,
			resizable:false,
			id : "changePlanEditCiDialog",
			buttons : [ {
				text : "确定",
				"class" : 'nui-mainbtn',
				click : function() {
					var returnObj = $("#changePlanEditCiDialog").find("iframe")[0].contentWindow.save();
					afterEditCi();
					$(this).wijdialog("close");
				}
			}, {
				text : "关闭",
				"class" : 'grey',
				click : function() {
					$(this).wijdialog("close");
				}
			} ]
		});

	}

	function viewChangeCi(ciId) {
		isperp.openDialog({
			title : "查看资产履历",
			onThisWindow : true,
			contentUrl : "configuration/ci/ciResumeView?id=" + ciId + "&keyword="
		});

	}

	function deleteChangeCi(ciId) {
		var chgId = '${changeId }';
		$.ajax({
			type : "get",
			url : "configuration/ciUseRelation/deleteCiRelationAndChangeRelateProperty",
			data : {
				changeId : chgId,
				ciId : ciId
			},
			success : function(data) {
				$("#div_ci_" + ciId).parent().remove();
			},
			error : function(data) {
				alert("删除失败！");
			}
		});

	}

	function RelateChangeCi() {
		selectCi();
		return false;
	}
	
	/** 
     * js截取字符串，中英文都能用 
     * @param str：需要截取的字符串 
     * @param len: 需要截取的长度 
     */
    function cutstr(str, len) {
        var str_length = 0;
        var str_len = 0;
        str_cut = new String();
        str_len = str.length;
        for (var i = 0; i < str_len; i++) {
            a = str.charAt(i);
            str_length++;
            if (escape(a).length > 4) {
                //中文字符的长度经编码之后大于4  
                str_length++;
            }
            str_cut = str_cut.concat(a);
            if (str_length >= len) {
                str_cut = str_cut.concat("...");
                return str_cut;
            }
        }
        //如果给定字符串小于指定长度，则返回源字符串；  
        if (str_length < len) {
            return str;
        }
    }

	//选择资产后执行构造变更资产列表 
	function createChangeCiList(tciId) {
		var changeId = '${changeId }';
		$.getJSON("configuration/ciUseRelation/listDetail?relationId=" + changeId, function(data) {
			//alert(data.content[0].ci_id);
			var appendStr = "<ul>";
			for ( var i = 0; i < data.content.length; i++) {
				var cicode = data.content[i].code;
				var cicty = data.content[i].conf_category_name;
				var ciid = data.content[i].ci_id;
				var ciname = data.content[i].name;
				appendStr += "<li class='cili1'><div id='div_ci_"+ciid+"'><div class='ulcihead'><div class='hspan'><b>资产编号：</b><span style='color:red;cursor: pointer;' onclick=\"viewChangeCi('" + ciid + "')\">" + cicode + "</span></div><div class='hspan'>&nbsp;&nbsp;&nbsp;类型：" + cicty + "</div><div class='hspan' title='"+ciname+"'>&nbsp;&nbsp;&nbsp;名称：" + cutstr(ciname,35) + "</div>&nbsp;&nbsp;&nbsp;";
				if($("#changeRelateCi_viewOnly").val()=="0")
				{
				   var actionStr="<span class='ui-icon icon-view' title='查看' onclick=\"viewChangeCi('" + ciid
						+ "')\"></span>&nbsp;&nbsp;<span class='ui-icon ui-icon-pencil' title='进入编辑需要变更的资产属性' onclick=\"editChangeCi('" + ciid + "')\"></span>&nbsp;&nbsp;<span class='ui-icon ui-icon-trash' title='删除' onclick=\"deleteChangeCi('" + ciid + "')\"></span></div></div></li>";
				   appendStr+=actionStr;
				}
				
			}
			appendStr += "</ul>";
			$("#changeCiCon").html("");
			$("#changeCiCon").append($(appendStr));
			$("#tr_chgCiContainer").show();

			//加载资产变更属性列表
			rebulidCipropertyList(changeId);
			if(tciId)
			{
			  editChangeCi(tciId);
			}
		});
	}
</script>